<template>
  <div  class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px">
      <x-header class="my-header" >服务详情</x-header>
      <flexbox orient="vertical">
        <flexbox-item><div class="flex-demo">
          <span class="icon"></span>
          <h4 class="item_title">护士姓名：{{nurse.name}}</h4>
        </div></flexbox-item>
      </flexbox>
      <p style="text-indent: 15px;font-size: 17px;margin-bottom: 15px">服务类型：{{service_name}}</p>
      <group>
        <cell title="总体评价">
          <rater v-model="star"></rater>
        </cell>
      </group>
      <div style="margin-top: 20px">
        <checker  style="margin-left: 20px"
                  v-model="tag"
                  type="checkbox"
                  default-item-class="demo5-item"
                  selected-item-class="demo5-item-selected"
        >
          <checker-item  :value="$t('技术欠佳')">{{$t('技术欠佳')}}</checker-item>
          <checker-item  :value="$t('态度差')">{{$t('态度差')}}</checker-item>
          <checker-item  :value="$t('不守时')">{{$t('不守时')}}</checker-item>
          <checker-item  :value="$t('不按规范操作')">{{$t('不按规范操作')}}</checker-item>
        </checker>
      </div>
      <group>
        <x-textarea v-model="text" :title="$t('文字评价')" :max="200" :placeholder="$t('')" :show-counter="false" :height="200" :rows="8" :cols="30"></x-textarea>
      </group>
      <group>
        <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="putComment()">确定</x-button>
      </group>
    </view-box>
    <toast v-model="comment" type="text" :time="1500" is-show-mask text="评价成功" position="bottom"></toast>
  </div>
</template>

<script>
  import {   Toast,Checker, CheckerItem,XTextarea,Flexbox, FlexboxItem, Rater, Group, Cell,ViewBox,XHeader,FormPreview,XButton,Divider } from 'vux'
  export default {
    data(){
      return{
        coid:'',
        service_name:'',
        nurse:{name:''},
        star:0,
        tag:[],
        text:'',
        comment:false
      }
    },
    mounted(){
      this.coid=this.$route.query.coid
      this.service_name=this.$route.query.service_name
      this.getNursename()
      this.getOrderDetails()
    },
    methods:{
        //获取护士姓名
      getNursename(){
        let data={
          order_type:2,
          user_type:1
        }
        this.Ajax('post','/Order/order/detail/coid/'+this.coid,data,(res)=>{
          this.nurse.name=res.data.nurse_name
        })
      },
      //提交评价
      putComment(){
        let data={
          star:this.star,
          tag:this.tag,
          text:this.text,
          type:1
        }
        console.log(data)
        this.Ajax('post','/Order/Order/comment/coid/'+this.coid,data,(res)=>{
          if(res.status=='success'){
            this.comment=true
              setTimeout(()=>{
                this.$router.push('/order_list')
              },1500)
          }
        })
      },
      getOrderDetails(){
        let data={
          order_type:2,
          user_type:1
        }
        this.Ajax('post','/Order/order/detail/coid/'+this.coid,data,(res)=>{

        })
      }
    },
    components:{
      XTextarea,
      Flexbox,
      FlexboxItem,
      Rater,
      Group,
      Cell,
      ViewBox,
      XHeader,
      XButton,
      FormPreview,
      Divider,Checker, CheckerItem,Toast
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="stylus" rel="stylesheet/stylus">
  .flex-demo{
    height: 90px;
    background-color: white;
  }
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .icon{
    display: inline-block;
    float:left;
    margin: 10px 5px 15px 20px;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-image: url('../mainpage/icons/woman@2x.png');
  }
  .item_title {
    display inline-block
    margin 10px 0 5px 0
    color black
  }
  .item_des {
    font-size 16px;
  }
  .container{
    background-color: white;
  }
  .demo5-item {
    width: 80px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
  }
  .demo5-item-selected {
    background: #ffffff url() no-repeat right bottom;
    border-color: #ff4a00;
  }
</style>
